<template>
	<view class="container">
		<view class="header-background">
			<view class="header-wrapper">
				<view class="left">
					<img class="logo" src="/static/logo_company.png" alt="公司logo" />码上有钱银行
				</view>
				<view class="right">
					<p>执行负责人：李某</p>
					<p>联系方式：132****5835</p>
					<p>联系地址：湖南省长沙市岳麓区</p>
				</view>
			</view>
		</view>

		<view class="card group-intro">
			<view class="title">
				团队介绍
			</view>
			<view class="group-desc" style="color: #666;">
				码上有钱银行，成立于2023年，是由中国领先的金融科技公司与多家传统金融机构共同发起设立的新型数字银行。
				总部位于湖南省长沙市，旨在通过先进的二维码支付技术及全面的数字化服务平台，提供涵盖个人理财、企业融资等多元化金融服务。
			</view>
		</view>

		<view class="card trade-trend">
			<view class="header-wrapper">
				<view class="left">
					<view class="title">
						交易走势
					</view>
					<view class="month-selector">
						选择月份
					</view>
				</view>
				<view class="right">
					<button>点击我</button>
				</view>
			</view>

			<view class="statistics-wrapper">
				<view class="statistic-block" style="border-bottom: 1px dashed #BBB;">
					月成交量（笔）
					<view class="statistic">
						300
					</view>
				</view>
				<view class="statistic-block" style="border-bottom: 1px dashed #BBB;">
					月交易额（元）
					<view class="statistic">
						8,772,491
					</view>
				</view>
				<view class="statistic-block">
					月入库额（元）
					<view class="statistic">
						9,601,495
					</view>
				</view>
			</view>

			<img src="/static/trend-chart.png" alt="" />

		</view>

		<view class="troop-intro">
			<!-- 高级管理员 -->
			<view class="troop-wrapper">
				<view class="troop-header">
					<p class="troop-title">------------ 高级管理员 ------------</p>
					<p class="troop-desc">全面控制｜监督协调｜最高权限</p>
				</view>
				<MemberCard v-for="(item, index) in advancedMembers" :key="index" :account="item.account"
					:name="item.name" :type="item.type" :tel="item.tel" :avatarUrl="item.avatarUrl">
				</MemberCard>
			</view>
			<!-- 普通管理员 -->
			<view class="troop-wrapper">
				<view class="troop-header">
					<p class="troop-title">------------ 中级管理员 ------------</p>
					<p class="troop-desc">稳定运行｜技术保障｜运维管理</p>
				</view>
				<MemberCard v-for="(item, index) in commonMembers" :key="index" :account="item.account"
					:name="item.name" :type="item.type" :tel="item.tel" :avatarUrl="item.avatarUrl">
				</MemberCard>
			</view>
			<a href="/pages/memberManagement/memberManagement">查看更多成员 >>></a>
		</view>
	</view>
</template>

<script>
	import MemberCard from '/components/MemberCard.vue';
	import {
		getUsers
	} from "@/api/user.js";

	export default {
		components: {
			MemberCard
		},

		data() {
			return {
				memberList: []
			};
		},

		computed: {
			advancedMembers() {
				return this.memberList.filter(m => m.type === 2);
			},
			commonMembers() {
				let maxLen = 6;
				const common = this.memberList.filter(m => m.type === 1);
				maxLen = maxLen > common.length ? common.length : maxLen;
				return common.slice(0, maxLen);
			}
		},

		onLoad: async function() {
			await this.fetchData();
		},

		methods: {
			async fetchData() {
				const result = await getUsers();
				console.log(result);
				this.memberList = result.data.map(r => ({
					account: r.account,
					name: r.name,
					type: r.userRight,
					tel: r.tel,
					avatarUrl: r.avatarUrl
				}))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		width: 100vw;
		height: 95vh;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	.header-background {
		position: absolute;
		z-index: 1;
		padding: 44px 16px 0;
		height: 240px;
		width: 100vw;
		box-sizing: border-box;
		background-image: linear-gradient(#BD3124, #BD3124, #BD3124, #BD3124, #BD3124, #BD3124, #F5F5F5); // 渐变
	}

	.header-wrapper {
		display: flex;
		justify-content: space-between;
	}

	.header-background .left {
		font-size: 24px;
		color: #FFF;
	}

	.header-background .right {
		font-size: 14px;
		color: #F5F5F5;
		text-align: right;
		line-height: 32px;
	}

	.logo {
		display: block;
		margin-bottom: 4px;
		width: 96px;
		height: 96px;
		border-radius: 8px;
		background-color: black;
	}

	.card {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;

		padding: 20px 20px;
		width: 316px;
		min-height: 160px;
		border-radius: 12px;
		background-color: #FFF;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
	}

	.group-intro {
		top: 192px;
	}

	.group-intro .title {
		margin-bottom: 16px;
		padding-bottom: 16px;
		font-size: 24px;
		border-bottom: 1px dashed #BBB;
	}

	.trade-trend {
		top: 450px;
	}

	.trade-trend .title {
		margin-bottom: 8px;
		font-size: 20px;
	}

	.statistics-wrapper {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: space-around;
		align-content: space-around;
	}

	.statistic-block {
		padding: 16px 0 8px;
		width: 160px;
		height: 84px;
		font-size: 14px;
	}

	.statistic {
		font-size: 28px;
		font-weight: 500;
		line-height: 60px;
		color: #333;
	}

	.trade-trend img {
		width: 100%;
		object-fit: cover;
	}

	.troop-intro {
		position: absolute;
		top: 920px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;

		padding: 20px 0;
		width: 356px;
		min-height: 160px;
	}

	.troop-wrapper {
		margin-bottom: 16px;
	}

	.troop-header {
		text-align: center;
		line-height: 32px;
	}

	.troop-title {
		font-size: 20px;
		color: #333;
	}

	.troop-desc {
		margin-bottom: 8px;
		font-size: 14px;
		color: #666;
	}

	ul {
		margin: 0;
		padding: 0;
		width: 100%;
		list-style-type: none;
	}

	a:link,
	a:visited {
		display: block;
		margin: 0 auto;
		text-decoration: none;
		color: #666;
	}
</style>